<template>
	<view class="driverOrder">
		<u-navbar title-color="#fff" back-icon-color="#ffffff" :is-fixed="true" :is-back="false"
			:background="background" :back-text-style="{color: '#fff'}" back-icon-name="nav-back">
			<view class="slot-wrap">
				<view class="search-wrap">
					<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
					<u-search v-model="keyword" :show-action="false" height="56" @search="Onsearch"
						:action-style="{color: '#fff'}" />
				</view>
			</view>
		</u-navbar>
		<view class="u-tabs-box">
			<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
				:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<view class="wrap">
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<!-- 进行中 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view v-if="driverOrderList[0].length === 0" class="empty">
								<u-empty mode="order"></u-empty>
							</view>
							<order-box v-else v-for="order in driverOrderList[0]" :orderItem="order" :carCode="carCode"
								:driverCode="driverCode" :key="order.id" />
							<u-loadmore v-if="loadStatus[0] !=='loadmore'" :status="loadStatus[0]" bgColor="#f2f2f2">
							</u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 已完成 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view v-if="driverOrderList[1].length === 0" class="empty">
								<u-empty mode="order"></u-empty>
							</view>
							<order-box v-else v-for="order in driverOrderList[1]" :orderItem="order" :carCode="carCode"
								:driverCode="driverCode" :key="order.id" />
							<u-loadmore v-if="loadStatus[0] !=='loadmore'" :status="loadStatus[1]" bgColor="#f2f2f2" />
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import orderBox from '../driver/orderBox.vue'
	import {
		updateDriverLocation
	} from '../../../api/driver/transport.js'
	import {
		SearchOrder
	} from '../../../api/driver/order.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			orderBox
		},
		data() {
			return {
				list: [{
					name: '进行中'
				}, {
					name: '已完成'
				}],
				tabs: [
					'正在进行中的订单',
					'已完成的订单',
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				loadStatus: ['loadmore', 'loadmore'],
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				keyword: '',
				page: 1,
				updateLocationInterval: null
			};
		},
		computed: {
			...mapGetters([
				'driverOrderList',
				'carCode',
				'driverCode',
				'isTransport',
				'name'
			])
		},
		created() {
			// 获取订单信息
			this.getData(0);
			console.log("获取司机订单信息");
		},
		mounted() {
			//this.hideLoading();
		},
		watch: {
			isTransport(val) {
				if (val) {
					// 开启定时任务，10秒更新一次司机的位置信息
					this.updateLocationInterval = setInterval(this.updateLocation, 10 * 1000);
				} else {
					// 清除定时器
					clearInterval(this.updateLocationInterval)
				}
			}
		},
		methods: {
			// 搜索订单
			Onsearch() {
				this.$store.dispatch('driverOrderInfo/CLEAR');
				SearchOrder(this.keyword, this.name)
					.then(res => {
						this.$store.dispatch('driverOrderInfo/SEARCHORDER',{data:res.body,tab:this.swiperCurrent});
					})
				// TODO 搜索订单
			},
			// 想后端发起请求，获取数据
			getData(index = this.current) {
				this.showLoading();
				let state = 5;
				let getUrl = 'driverOrderInfo/GETFINISHORDER';
				if (index === 0) {
					state = 2;
					getUrl = 'driverOrderInfo/GETGRABBINGORDER';
				}
				let needPage = this.driverOrderList[index].length / 4 + 1
				console.log(state,getUrl);
				this.$store.dispatch(getUrl, {
					page: needPage,
					limit: 4,
					orderState: state,
					driverName: this.name
				}).then(res => {
					if (res.code !== 200) {
						uni.showToast({
							title: '没有更多了',
							icon: 'none',
							duration: 1500
						});
					}
					this.hideLoading();
				}).catch(err => {
					console.log(err);
					this.hideLoading();
				})
				this.loadStatus.splice(this.current, 1, "loadmore")
			},
			updateLocation() {
				let _self = this;
				console.log('更新司机的位置信息');
				uni.getLocation({
					type: 'gcj02', // 返回国测局坐标
					geocode: true,
					success: function(res) {
						let drvierInfo = {
							longitude: res.longitude,
							latitude: res.latitude,
							driverCode: _self.driverCode
						}
						updateDriverLocation({
								driverLocation: JSON.stringify(drvierInfo)
							})
							.then(res => {
								if (res.hearder.code !== 200) {
									uni.showToast({
										icon: 'none',
										title: '获取地址失败, 请检查是否开启定位权限~~'
									})
								}
							})
					},
					fail: function(e) {
						uni.showToast({
							icon: 'none',
							title: '获取地址失败, 请检查是否开启定位权限~~'
						})
					}
				})
			},
			reachBottom() {
				// 此tab为空数据
				if (this.current != 2) {
					this.loadStatus.splice(this.current, 1, "loading")
					setTimeout(() => {
						this.getData();
					}, 1200);
				}
			},
			showLoading: function() {
				uni.showLoading({
					title: 'loading'
				});
				// #ifdef MP-ALIPAY
				this._showTimer && clearTimeout(this._showTimer);
				this._showTimer = setTimeout(() => {
					this.hideLoading();
				}, 3000)
				// #endif
			},
			hideLoading: function() {
				uni.hideLoading();
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				this.$store.dispatch('driverOrderInfo/CLEAR');
				this.getData(index);
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	}
</script>

<style lang="scss">
	.driverOrder {
		height: 100%;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		height: 100rpx;
		.search-wrap {
			margin: 0 20rpx;
			flex: 1;
		}

		.navbar-right {
			margin-right: 24rpx;
			display: flex;

			.message-box {}

			.right-item {
				margin: 0 12rpx;
				position: relative;
				color: #ffffff;
				display: flex;
			}
		}
	}

	.u-tabs-box {
		position: fixed;
		left: 0;
		right: 0;
		top: 140rpx;
		height: 95rpx;
		z-index: 990;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(85vh - var(--window-top));
		width: 100%;
		margin-top: calc(80rpx);
		overflow: hidden;


	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;

		.page-box {
			display: flex;
			align-items: center;
			justify-items: center;
			flex-direction: column;                                                                                                                                                                                                                                      
			.empty {
				margin: 50% auto;
			}
		}
	}
</style>
